<template>
    <div style="width: 100%; height: 240px;">
        <div style="width: 100%; height: 280px;margin-left: 10px;" ref="mychart"></div>
    </div>
</template>

<script>
  import * as echarts from 'echarts';
export default {

    props:{
        dataList:[
        { value: 448, name: '5-17' },
                            { value: 735, name: '18-30' },
                            { value: 580, name: '31-44' },
                            { value: 284, name: '45-60' },
                            { value: 120, name: '60以上' }
        ]
    },
    data() {
        return {
            currentIndex:0,
            serData:this.dataList,
            option: {
                title:{
                        text:'游客年龄分布图',
                        left:'center',
                        top:'10px',
                        textStyle: {
                            color: '#fff',  // 设置标题文字颜色为蓝色
                            fontSize: 14,    // 设置标题文字大小为18px
                            fontWeight: 'bold'  // 设置标题文字加粗
                        }
                    },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    top: '5%',
                    right: '15',
                    textStyle: {
                        color: '#ccc'
                        // ...
                        }
                },
                series: [
                    {
                        name: '人数',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center', // 位置可以根据需要调整
                            formatter: '{b} ({d}%)', // 显示名称和百分比
                            },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 23,
                                fontWeight: 'bold',
                                color:'#1bffff'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 448, name: '5-17' },
                            { value: 735, name: '18-30' },
                            { value: 580, name: '31-44' },
                            { value: 284, name: '45-60' },
                            { value: 120, name: '60以上' }
                        ]
                    }
                ]
            }
        }
    },
    beforeDestroy() {
    // 在组件销毁前清除定时器
    clearInterval(this.timer);
  },
    mounted(){

          this.init()
          var mychart = echarts.init(this.$refs.mychart)
          this.timer = setInterval(() => {
            this.currentIndex = (this.currentIndex + 1) % 5;
           
            // 使用 dispatchAction 高亮显示当前数据项
            for(var i=0;i<5;i++){
                mychart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: i,
         });
            }
            mychart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: this.currentIndex,
         });
        
        },1500)
        

      },
      watch:{
        //监听有没有新的数据更新

      },
      methods:{
        init(){
          var mychart = echarts.init(this.$refs.mychart)
          this.option.series[0].data = this.serData
          mychart.setOption(this.option)
        }
      }
}
</script>

<style>

</style>